@import "../../base/fn";

/**
 * 弹窗类
 */
.ui-dialog{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: $z-index-overlay;
	-webkit-box-orient: horizontal;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	background: $mask-bg;
	display: none;
}
.ui-dialog.show{
	display: -webkit-box;
}
.ui-dialog-cnt{
	border-radius: $dialog-border-radius;
	width: 296px;
	-webkit-background-clip: padding-box;
	pointer-events: auto;
	background-color: $dialog-cnt-bg;
	position: relative;
    border-top: 4px solid $dialog-top-bg;
    -webkit-box-sizing: border-box;
    color: $dialog-color;
}
.ui-dialog-hd{
    width: 100%;
    text-align: center;
    min-height:45px;
    display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	overflow: hidden;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}
.ui-dialog-bd{
	min-height: 46px;
	border-top-left-radius: $dialog-border-radius;
	border-top-right-radius: $dialog-border-radius;
	// padding: $dialog-bd-padding;
    padding: 18px 28px 18px 28px;
	display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	-webkit-box-orient: vertical;
}
.ui-dialog-bd h2,
.ui-dialog-bd h3{
    font-size: 20px;
    width: auto;
    margin: 1px auto 5px;
}

.ui-dialog-bd > p{
    font-size: $font-size-base;
    // width: 100%;
    width: auto;
    margin: 2px auto;
}
.ui-dialog-ft{
    border-bottom-left-radius: $dialog-border-radius;
	border-bottom-right-radius: $dialog-border-radius;
    display: -webkit-box;
    width: 100%;
    box-sizing: border-box;
    -webkit-box-align: center;
    border-top: 1px solid $bordercolor;
    height: $dialog-ft-height;
    line-height: $dialog-ft-height;
}
.ui-dialog-ft button{
    font-size: 18px;
    text-align: center;
    // border-right: 1px $bordercolor solid;
    width: 100%;
    line-height: $dialog-ft-height;
    // background: transparent;
    display: block;
    margin: 0;
    -webkit-box-flex: 1;
    &:active {
        background-color: $dialog-btn-active;
    }
    &:first-child{
        border-bottom-left-radius: $dialog-border-radius;
    }
    &:last-child{
        // border-right: 0;
        border-bottom-right-radius:$dialog-border-radius;
    }
    &:first-child:nth-last-child(2){
        position: relative;
        &:after{
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            display: block;
            width: 1px;
            height: 100%;
            border-right: 1px $bordercolor solid;
        }
    }
}
@media screen and (-webkit-min-device-pixel-ratio:2.0){
    .ui-dialog-ft{
        position: relative;
        border: 0;
        background-position: left top;
        background-image: $border-t;
        background-repeat: repeat-x;
        -webkit-background-size: 100% 1px;
    }
    .ui-dialog-ft button{
        &:first-child:nth-last-child(2){
            &:after{
                content: "";
                position: absolute;
                right: 0;
                top: 0;
                display: block;
                width: 1px;
                height: 100%;
                border-right: 0;
                background-position: right top;
                background-image: $border-r;
                background-repeat: repeat-y;
                -webkit-background-size: 1px 100%;
            }

        }
    }
}
